Description

TooltipModal was using legacy component-library patterns (StyleSheet.create, raw View, deprecated BottomSheetFooter, and component-library Text) that are no longer consistent with the current UI development standards.

This PR migrates TooltipModal to fully conform to the new standards:

• Replaces View with Box from @metamask/design-system-react-native
• Replaces component-library Text/TextVariant/TextColor with the design system equivalents (TextVariant.BodyMd, TextColor.TextAlternative)
• Replaces the deprecated component-library BottomSheetFooter (which used a broken Object.assign + StyleSheet.create approach for style overrides) with the design system BottomSheetFooter, which applies styles via a style array and twClassName correctly
• Removes StyleSheet.create and the companion ToolTipModal.styles.ts file
• Adds useSafeAreaInsets for device-aware bottom padding on the footer
• Adds useTailwind for all Tailwind-based styling
• Updates tests to match the new component structure

The deprecated BottomSheetFooter had a bug where passing paddingHorizontal via its style prop did not apply correctly — the internal Object.assign + StyleSheet.create merge caused the shorthand paddingHorizontal to be overridden by already-resolved longhand values. The design system component resolves this by applying styles as a proper array where the last entry wins.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-4249

Manual testing steps

Feature: TooltipModal rendering and interaction

  Background:
    Given I am logged into MetaMask Mobile

  Scenario: user opens a tooltip and reads content
    Given I am on a screen that displays a tooltip icon (e.g. Swaps confirmation — Slippage row)

    When user taps the info icon next to a label
    Then a bottom sheet should appear with the correct title in the header
    And the tooltip content text should be visible below the header
    And the "Got it" button should be visible in the footer with 16px horizontal padding
    And on devices with a home indicator (iPhone X+) the button should sit above the home bar

  Scenario: user dismisses tooltip via "Got it" button
    Given the tooltip bottom sheet is open

    When user taps the "Got it" button
    Then the bottom sheet should close

  Scenario: user dismisses tooltip via close icon
    Given the tooltip bottom sheet is open

    When user taps the X icon in the header
    Then the bottom sheet should close

  Scenario: tooltip with optional footer text
    Given a tooltip is configured with additional footer text

    When user opens the tooltip
    Then the footer text should appear below the "Got it" button
    And the footer text should respect the safe area bottom inset

Screenshots/Recordings

Before

N/A

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.